<template>
  <div ref="lineChart02" class="line-chart-02 chart"></div>
</template>

<script setup>
import { onMounted, ref, inject } from 'vue'

const lineChart02 = ref(null)
const echarts = inject('$echarts')

// 参数
const seriesData = [
  {
    name: '异常数',
    data: [60, 100, 120, 130, 120, 110]
  },
  {
    name: '离线数',
    data: [150, 160, 200, 210, 140, 120]
  },
  {
    name: '在线数',
    data: [500, 400, 380, 350, 420, 500]
  },
  {
    name: '完好数',
    data: [600, 580, 530, 540, 600, 640]
  },
];

const option = {
  compCode: 'C202309032',
  backgroundColor: "#012366",
  animationDuration: 4000,
  animationEasing: 'cubicInOut',
  tooltip: {
    trigger: 'axis',
    backgroundColor: '#053962', // 设置背景色为半透明红色
    borderColor: '#165e9e', // 设置边框颜色
    borderWidth: 1,
    textStyle: {
      color: '#fff'
    },
  },
  // legend: {
  //   data: ['2018', '2019'],
  // },
  grid: {
    left: '10%',
    right: '10%',
    bottom: '5%',
    containLabel: true
  },
  xAxis: {
    type: 'category',
    boundaryGap: false, // 坐标轴两边留白
    data: ['4:00', '8:00', '12:00', '16:00', '20:00', '24:00'],
    axisLabel: {
      // 坐标轴刻度标签的相关设置。
      interval: 0, // 设置为 1，表示『隔一个标签显示一个标签』
      //	margin:15,
      textStyle: {
        color: '#fff',
        fontStyle: 'normal',
        fontFamily: '微软雅黑',
        fontSize: 14
      },
      formatter: function(params) {
        let newParamsName = '';
        let paramsNameNumber = params.length;
        let provideNumber = 4; // 一行显示几个字
        let rowNumber = Math.ceil(paramsNameNumber / provideNumber);
        if (paramsNameNumber > provideNumber) {
          for (let p = 0; p < rowNumber; p++) {
            let tempStr = '';
            let start = p * provideNumber;
            let end = start + provideNumber;
            if (p == rowNumber - 1) {
              tempStr = params.substring(start, paramsNameNumber);
            } else {
              tempStr = params.substring(start, end) + '\n';
            }
            newParamsName += tempStr;
          }
        } else {
          newParamsName = params;
        }
        return newParamsName;
      }
      // rotate:50,
    },
    axisTick: {
      // 坐标轴刻度相关设置。
      show: false
    },
    axisLine: {
      // 坐标轴轴线相关设置
      lineStyle: {
        color: '#437f87'
        // opacity:0.2
      }
    },
    splitLine: {
      // 坐标轴在 grid 区域中的分隔线。
      show: false,
      lineStyle: {
        color: '#f00'
        // 	opacity:0.1
      }
    }
  },
  yAxis: [
    {
      type: 'value',
      splitNumber: 5,
      axisLabel: {
        show: false,
        textStyle: {
          color: '#fff',
          fontStyle: 'normal',
          fontFamily: '微软雅黑',
          fontSize: 16
        }
      },
      axisLine: {
        show: true,
        lineStyle: {
          color: '#437f87'
        }
      },
      axisTick: {
        show: false,
        lineStyle: {
          color: '#437f87'
        }
      },
      splitLine: {
        show: false,
        lineStyle: {
          color: '#f00'
          // 	opacity:0.1
        }
      }
    }
  ],
  series: [
    {
      name: seriesData[0].name,
      type: 'line',
      label: {
        show: true,
        position: 'top',
        textStyle: {
          color: '#ed1719',
          fontSize: 14
        }
      },
      itemStyle: {
        normal: {
          color: '#ed1719',
          lineStyle: {
            color: '#ed1719',
            width: 3
          },
          areaStyle: {
            color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
              {
                offset: 0,
                color: 'rgba(101, 55, 55,0)'
              },
              {
                offset: 1,
                color: 'rgba(101, 55, 55,0.35)'
              }
            ])
          }
        }
      },
      data: seriesData[0].data
    },
    {
      name: seriesData[1].name,
      type: 'line',
      label: {
        show: true,
        position: 'top',
        textStyle: {
          color: '#e4b93f',
          fontSize: 14
        }
      },
      itemStyle: {
        normal: {
          color: '#e4b93f',
          lineStyle: {
            color: '#e4b93f',
            width: 3
          },
          areaStyle: {
            color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
              {
                offset: 0,
                color: 'rgba(68, 93, 73,0)'
              },
              {
                offset: 1,
                color: 'rgba(68, 93, 73,0.35)'
              }
            ])
          }
        }
      },
      data: seriesData[1].data
    },
    {
      name: seriesData[2].name,
      type: 'line',
      label: {
        show: true,
        position: 'top',
        textStyle: {
          color: '#02e1e3',
          fontSize: 14
        }
      },
      itemStyle: {
        normal: {
          color: '#02e1e3',
          lineStyle: {
            color: '#02e1e3',
            width: 3
          },
          areaStyle: {
            color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
              {
                offset: 0,
                color: 'rgba(5, 103, 103,0)'
              },
              {
                offset: 1,
                color: 'rgba(5, 103, 103,0.35)'
              }
            ])
          }
        }
      },
      data: seriesData[2].data
    },
    {
      name: seriesData[3].name,
      type: 'line',
      label: {
        show: true,
        position: 'top',
        textStyle: {
          color: '#02e693',
          fontSize: 14
        }
      },
      itemStyle: {
        normal: {
          color: '#02e693',
          lineStyle: {
            color: '#02e693',
            width: 3
          },
          areaStyle: {
            color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
              {
                offset: 0,
                color: 'rgba(6, 90, 85,0)'
              },
              {
                offset: 1,
                color: 'rgba(6, 90, 85,0.35)'
              }
            ])
          }
        }
      },
      data: seriesData[3].data
    }
  ]
};

onMounted(() => {
  const chart = echarts.init(lineChart02.value)
  chart.setOption(option)
})
</script>

<style scoped></style>
